<template>
  <div class="divbl">
    <div class="c"></div>
    <div class="gerenziliao" v-if="JSON.stringify(list) != '{}'">
      <div class="name">
        <el-avatar
          :src="poot+'manongyizhanFile/users/'+list.blogdata.users.users.mailbox+'/头像/'+list.blogdata.users.users.mailbox+'.jpg'"
        ></el-avatar>
        <h3>{{list.blogdata.users.users.nickname}}</h3>
        <img class="gz" @click="guanzhu" src="@/assets/关注2.png" title="关注" v-if="!gz" />
        <img class="gz" @click="guanzhu" src="@/assets/关注.png" title="关注" v-if="gz" />
      </div>
      <div class="blogdata">
        <div class="gr">
          <div class="gritem">
            <font class="num">{{list.blogdata.qriginal}}</font>
            <br />
            <font class="title">创作</font>
          </div>
          <div class="gritem">
            <font class="num">{{list.blogdata.fabulous}}</font>
            <br />
            <font class="title">获赞</font>
          </div>
          <div class="gritem">
            <font class="num">{{list.blogdata.collection}}</font>
            <br />
            <font class="title">收藏</font>
          </div>
          <div class="gritem">
            <font class="num">{{list.blogdata.comment}}</font>
            <br />
            <font class="title">评价</font>
          </div>
        </div>
        <div class="gr">
          <div class="gritem">
            <font class="num">{{list.blogdata.browse}}</font>
            <br />
            <font class="title">访问</font>
          </div>
          <div class="gritem">
            <font class="num">{{list.blogdata.fans}}</font>
            <br />
            <font class="title">粉丝</font>
          </div>

          <div class="gritem">
            <font class="num">{{list.blogdata.codeage}}</font>
            <br />
            <font class="title">码龄(年)</font>
          </div>
          <div class="gritem">
            <!-- <font class="num">{{list.blogdata.grade}}</font> -->
            <!-- <el-popover placement="bottom" title="等级规则" width="230" trigger="hover">
              <el-button size="mini" class="djbtu" slot="reference">
                <font class="title">等级</font>
              </el-button>
              <h4>积分评定</h4>
              <hr />
              <div class="djgz">
                发表文章：10分
                <br />被评论：5分 评论他人：5分
                <br />被点赞：3分 点赞他人：2分
                <br />被浏览：2分 浏览他人：1分
                <br />被收藏：8分 收藏他人：3分
                <br />
                <h4>等级评定</h4>
                <hr />

                <div class="divdjpd">
                  <font class="djpd">1： 0&nbsp;&nbsp;</font>
                  <font class="djpd">2： 50&nbsp;&nbsp;</font>
                  <font class="djpd">
                    3：150
                    <br />
                  </font>
                  <font class="djpd">4：300&nbsp;&nbsp;</font>
                  <font class="djpd">5：500&nbsp;&nbsp;</font>
                  <font class="djpd">
                    6：1000
                    <br />
                  </font>
                  <font class="djpd">7：2000&nbsp;</font>
                  <font class="djpd">8：4000&nbsp;</font>
                  <font class="djpd">10：10000</font>
                </div>
              </div>
            </el-popover> -->
            <font class="num">{{list.blogdata.grade}}</font>
            <br />
            <font class="title">等级</font>
          </div>
        </div>
      </div>

      <hr size="1" color="#999" style="border:1 solid #999" />
    </div>
    <div class="qitabike" v-if="otherlist.length>0">
      <div class="qtbktitle">博主的其他博客</div>
      <div v-for="(item,index) in otherlist" :key="index">
        <div class="fl">{{item.userotherblog.tags.tags.name}}</div>
        <div
          @click="xq('/blog/'+item2.blog.id)"
          class="qtbkitem"
          v-for="(item2,index) in item.userotherblog.blogList"
          :key="index"
        >{{item2.blog.title}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  props: ["index"],
  inject: ["reload"],
  data() {
    return {
      list: {},
      otherlist: [],
      testhtml: "",
      gz: false,
      visible: false
    };
  },
  methods: {
    guanzhu() {
      if (this.list.blogdata.users.users.mailbox == this.user) {
        this.open("自己就不要关注自己了", "warning");
      } else if (!this.gz) {
        this.gz = true;
        this.$http
          .get(
            this.poot +
              "insertattention/" +
              this.list.blogdata.users.users.mailbox +
              "/" +
              this.user
          )
          .then(response => {
            this.open("关注成功", "success");
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.gz = false;
        this.$http
          .get(
            this.poot +
              "deleteattention/" +
              this.list.blogdata.users.users.mailbox +
              "/" +
              this.user
          )
          .then(response => {
            this.open("取消关注成功", "success");
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    open(message, type) {
      this.$message({
        message: message,
        type: type
      });
    },
    xq(path) {
      this.$router.push(path);
      this.reload();
    },
    selectattention() {
      this.$http
        .get(
          this.poot +
            "selectattention/" +
            this.list.blogdata.users.users.mailbox +
            "/" +
            this.user
        )
        .then(response => {
          if (response.data == "ok") {
            this.gz = true;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectblogByid" + "/" + this.index)
        .then(response => {
          this.list = response.data;
          this.chushihua2();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    chushihua2() {
      this.$http
        .get(
          this.poot + "selectother/" + this.list.blogdata.users.users.mailbox
        )
        .then(response => {
          this.otherlist = response.data;
          this.selectattention();
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
  }
};
</script>
<style scoped>
.divdjpd {
  width: 100%;
}
.djpd {
  width: 150px;
  /* background-color: #000; */
}
.djbtu {
  background-color: #161616;
  border: 0;
  margin: 0;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gz {
  margin-left: 20px;
  width: 25px;
}
.fl {
  border-left: 2px #ffd04b solid;
  margin-left: 5px;
  font-size: 20px;
  color: #354b7b;
}
.qtbkitem {
  margin-left: 5px;
  font-size: 13px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.qitabike::-webkit-scrollbar {
  display: none;
}
.qitabike {
  margin-top: 20px;
  overflow: auto;
  height: 600px;
}
.title {
  font-weight: bold;
  color: #354b7b;
}
.qtbktitle {
  margin-left: 5px;
  font-size: 20px;
  /* border-left: 2px #ffd04b solid; */
  color: #354b7b;
}
hr {
  margin-top: 5px;
  width: 95%;
}
.gritem {
  text-align: center;
  width: 25%;
}
.gr {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.name {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-right: 100px;
  margin-left: 10px;
  width: 300px;
}
h3 {
  margin-left: 20px;
  color: #354b7b;
  width: 70px;
}

.divbl {
  background-color: #161616;
  width: 200px;
  height: 760px;
}
</style>